<template>
  <div id='app123'>
    <div>
      <h1>{{`基于Element-UI组件改造的树形选择器`}}:</h1>
      <!-- 调用树形下拉框组件 -->
      <SelectTree :props='props' :options='list' :value='valueId' :clearable='isClearable' :accordion='isAccordion' @getValue='getValue($event)' />
      ID为：{{valueId}}
    </div>
    <el-divider></el-divider>
    <div>
      <h1>{{`单选，并且只能选择叶子节点。TODO`}}:</h1>
      <!-- 调用树形下拉框组件 -->
      <SelectTree :props='props' :options='list' :value='4' :clearable='isClearable' :accordion='isAccordion' @getValue='getValue($event)' />
      ID为：{{valueId}}
    </div>
    <el-divider></el-divider>
    <div>
      <h1>{{`开启多选`}}:</h1>
      <!-- 调用树形下拉框组件 -->
      <SelectTree :props='props' :options='list' :value='valueId' :clearable='isClearable' :accordion='isAccordion' :showCheckbox='true' @getValue='getValue($event)' />
      ID为：{{valueId}}
    </div>

  </div>
</template>

<script>
import SelectTree from '@/components/SelectTree';
import res from '@/api/selectTree/list.json';
export default {
  name: 'selectTree',
  components: { SelectTree },
  data () {
    return {
      isClearable: true, // 可清空（可选）
      isAccordion: true, // 是否每次只打开一个同级树节点展开（可选）
      valueId: 1, // 初始ID（可选）
      props: {
        // 配置项（必选）
        value: 'id',
        label: 'label',
        children: 'children'
      },
      // 选项列表
      list: []
    };
  },
  created () {
    this.list = res.data;
  },
  methods: {
    // 取值
    getValue (value) {
      this.valueId = value;
    }
  }
};
</script>

<style>
#app123 {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
